<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>从window.performance看待网络优化</title>
</head>
<body>
  <h3>window.performance的属性数据可以借助谷歌浏览器的netWork进行查询，但window.performance的显示更为准确</h3>

  <ul>
    <li>domainLookupStart：域名查询开始时的时间戳。</li>
    <li>domainLookupEnd：域名查询结束时的时间戳。</li>
    <li>
        &lt;link rel="dns-prefetch" href="//domain.com"&gt;可以进行域名的预解析，优化寻址的时间
    </li>
  </ul>
  <hr>
  <ul>
      <li>responseStart：浏览器从服务器（或读取本地缓存）收到第一个字节时的时间戳。</li>
      <li>responseEnd：浏览器从服务器收到最后一个字节时的毫秒时间戳。</li>
      <li>
         优化方法：使用cdn，后端配置Gzip
      </li>
  </ul>
  <hr>
  <h3>优化首频加载</h3>
  <ul>
    <li>懒加载，减少请求，尽量少用标签</li>
  </ul>
  <hr>
  <h3>其他属性</h3>
  <pre>
      属性说明：

      navigationStart：浏览器处理当前网页的启动时间
      fetchStart：浏览器发起http请求读取文档的毫秒时间戳。
      domainLookupStart：域名查询开始时的时间戳。
      domainLookupEnd：域名查询结束时的时间戳。
      connectStart：http请求开始向服务器发送的时间戳。
      connectEnd：浏览器与服务器连接建立（握手和认证过程结束）的毫秒时间戳。
      requestStart：浏览器向服务器发出http请求时的时间戳。或者开始读取本地缓存时。
      responseStart：浏览器从服务器（或读取本地缓存）收到第一个字节时的时间戳。
      responseEnd：浏览器从服务器收到最后一个字节时的毫秒时间戳。
      domLoading：浏览器开始解析网页DOM结构的时间。
      domInteractive：网页dom树创建完成，开始加载内嵌资源的时间。
      domContentLoadedEventStart：网页DOMContentLoaded事件发生时的时间戳。
      domContentLoadedEventEnd：网页所有需要执行的脚本执行完成时的时间，domReady的时间。
      domComplete：网页dom结构生成时的时间戳。
      loadEventStart：当前网页load事件的回调函数开始执行的时间戳。
      loadEventEnd：当前网页load事件的回调函数结束运行时的时间戳。
       
  </pre>
</body>
</html>